<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			.mui-badge {
				top: 4px;
				right: 4px;
			}
			
			.mui-table h4,
			.mui-table h5,
			.mui-table .mui-h5,
			.mui-table .mui-h6,
			.mui-table p {
				margin-top: 0;
			}
			
			h4 {
				line-height: 21px;
				font-weight: normal;
			}
			
			.mui-table .oa-icon {
				position: absolute;
				right: 0;
				bottom: 0;
			}
			
			.mui-table .oa-icon-star-filled {
				color: #f14e41;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="pullrefresh">
			<ul id="list" class="mui-table-view mui-table-view-striped mui-table-view-condensed">					
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/parseTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script id="tpl" type="text/html">
			<# var item;
				for(var i=0 ; i < data.length; i++) { item=data[i];
					if (i==0) firstID.article = item.ID;
					if (i==data.length-1) lastID.article = item.ID;
				#>
				<li class="mui-table-view-cell" data-id="<#= item.ID #>">
								<h4 class="mui-ellipsis"><#= item.Title #></h4>
								<p class="mui-h5"><#= item.Content #></p>
								<span class="mui-h6"><#= item.PublishTime #></span>							
					</li>
				<# } #>
		</script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					buildNotice(true);
										
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					
					console.log("下拉刷新");
				}, 1500);
			};
			
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					
					buildNotice(false, true);
					
					console.log("上拉加载");
				}, 1500);
			};
						
			mui("#list").on('tap', 'li', function(){
				var id = this.getAttribute("data-id");
				app.openMessage(id);
			});
			
			var account;
			var $objs = {article:document.getElementById("list")};
			var tpl = {article:document.getElementById("tpl").innerHTML};
			var lastID = {article:null};
			var firstID= {article:null};
			var dataList;
			
			getItemData = function(id){
				console.log(JSON.stringify(dataList));
				var f = dataList.data.filter(function(item) {
					return item.HistoryID == id;
				});
				return f.length > 0 ? f[0] : null;
			};
						
			init = function(){							
				plus.nativeUI.showWaiting();
				buildNotice();
			};
			
			build = function(url, type, isPull, isPush){				
				var data = {};
				if(isPush) data.LastID = lastID[type];
				if(isPull) data.FirstID = firstID[type];
				
				app.post(url, data, function(data){
					console.log(JSON.stringify(data));
					var html = parseTemplate(tpl[type], data);					
					
					if(isPull)
						$objs[type].insertAdjacentHTML("afterBegin", html);
					else if(isPush)
						$objs[type].insertAdjacentHTML("beforeEnd", html);
					else
						$objs[type].innerHTML = html;
				});
			}
			
			buildNotice = function(isPull, isPush){
				build("GetNewsList", "article", isPull, isPush);
			};
						
			mui.plusReady(function(){
				init();
			});
		</script>
	</body>

</html>